<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>管理员登录页面</title>
	<base th:href="@{/}">
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<style>
		body{
			/* 设置背景渐变 */
			background-image: linear-gradient(to left,
			#9c88ff,#3cadeb);
			display: flex;
			justify-content: center;
		}
		.a{
			position:relative;
			top: 100px;
			width: 1100px;
			height: 550px;
			box-shadow: 0 5px 15px rgba(0,0,0,.8);
			display: flex;
		}
		.b{
			width: 750px;
			height: 550px;
			/*background-image: url("");*/
			/* 让图片适应大小 */
			background-size: cover;
		}
		.c{
			width: 350px;
			height: 550px;
			background-color: white;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.d{
			width: 250px;
			height: 500px;
		}
		.d h1{
			font: 900 30px '';
		}
		.e{
			width: 230px;
			margin: 20px 0;
			outline: none;
			border: 0;
			padding: 10px;
			border-bottom: 3px solid rgb(80,80,170);
			font: 900 16px '';
		}
		.f{
			float: right;
			margin: 10px 0;
		}
		.g{
			position: absolute;
			margin: 20px;
			bottom: 40px;
			display: block;
			width: 100px;
			height: 60px;
			font: 900 30px '';
			text-decoration: none;
			line-height: 50px;
			border-radius: 30px;
			background-image: linear-gradient(to left,
			#9c88ff,#3cadeb);
			text-align: center;
		}
		.h {
			position: absolute;
			margin: 8px;
			bottom: 53px;
			left: 970px;
			display: block;
			width: 100px;
			height: 60px;
			font: 900 30px '';
			text-decoration: none;
			line-height: 50px;
			border-radius: 30px;
			background-image: linear-gradient(to left, #9c88ff,#3cadeb);
			text-align: center;
		}
		.pic{
			width: 750px;
			height: 550px;
		}
	</style>
	<script type="text/javascript" th:inline="javascript">
		function refreshCode(){
			document.getElementById("mycode").src = [[@{/validateCode}]] + "?t=" + Math.random();
		}
	</script>
</head>
<body>
<div class="a">
	<div class="b"><img class="pic"  th:src="'images/' + 'swu.jpg'"></div>
	<form th:action="@{/admin/login}" name="myform" method="post" th:object="${aUser}" >
		<div class="c">
			<div class="d">
				<h1>管理员登录</h1>
				<input type="text" class="e" placeholder="请输入管理员名" th:field="*{aname}">
				<span th:errors="*{aname}"></span>
				<input  type="password"  class="e" placeholder="请输入您的密码" th:field="*{apwd}">
				<span th:errors="*{apwd}"></span>

			</div>
		</div>
		<button type="submit"class="g" >登录</button>
		<button class="h" type="reset">重置</button>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<font size="6" color="red">
					<span th:text="${errorMessage }"></span>
				</font>
			</div>
		</div>
	</form>
</div>
</body>
</html>